{include file='public/head2'}
<div id="main-page">
    <div class="p-3 bg-white wap"><form id="Form">
        <div class="loader">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
            </svg>
        </div>
        
        <div class="card br-10 mb-3" style="height:0.94rem;">
            <div class="circle1" style="top:-0.7rem;"></div>
            <div class="circle2" style="bottom:-1.7rem;"></div>
            <div class="content tac" style="line-height:0.94rem;">
                <h2>{$title}</h2>
            </div>
        </div>
        
        <h2 class="fc-light py-3">|&nbsp;&nbsp;基本信息</h2>

        <div class="row form-box">
            <div class="col-3">商户openid</div>
            <div class="col-9">
                <input type="text" name="data[real_openid]" value="{$data['real_openid']}" class="form-input-bg" data-verify="" data-title="商户openid">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填入抖音商户OPENID，视频“@商户名称”时与该选项有关，可留空，输入错误会影响使用。</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 活动标题</div>
            <div class="col-9">
                <input type="text" name="data[title]" value="{$data['title']}" class="form-input-bg" data-verify="required" data-title="活动标题">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 开始时间</div>
            <div class="col-9">
                <input type="text" value="{:date('Y-m-d',$data['starttime'])}" name="data[starttime]" class="form-input-bg room" data-verify="required" data-title="开始时间">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 结束时间</div>
            <div class="col-9">
                <input type="text" value="{:date('Y-m-d',$data['endtime'])}" name="data[endtime]" class="form-input-bg room" data-verify="required" data-title="结束时间">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 活动类型</div>
            <div class="col-9">
              <div class="radiobox" {if $data['paytype']==0}style="border-color:#ff6464;"{/if}>
                  <input type="radio" value="0" name="data[paytype]" id="paytype1" class="myradio" data-verify="required" {if $data['paytype']==0}checked{/if} data-title="活动类型">
                  <label for="paytype1">
                    卡券模式
                  </label>
              </div>
              <div class="radiobox" {if $data['paytype']==1}style="border-color:#ff6464;"{/if}>
                  <input type="radio" value="1" name="data[paytype]" id="paytype2" class="myradio" data-verify="required" {if $data['paytype']==1}checked{/if} data-title="活动类型">
                  <label for="paytype2">
                    纯推广模式
                  </label>
              </div>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 跳转类型</div>
            <div class="col-9">
              <select name="data[jump]" class="form-input-bg custominfotype">
                  <option value="card" {if $data['jump']=='card'}selected{/if}>进入卡券列表页面</option>
                  <option value="real_share" {if $data['jump']=='real_share'}selected{/if}>进入商户抖音主页</option>
                  <option value="url" {if $data['jump']=='url'}selected{/if}>打开自定义链接地址</option>
              </select>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box" id="jump_url_box" {if $data['jump']!='url'}style="display:none"{/if}>
            <div class="col-3">自定义链接</div>
            <div class="col-9">
                <input type="text" value="{$data['jump_url']}" name="data[jump_url]" class="form-input-bg" data-verify="" data-title="自定义链接">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 活动模板</div>
            <div class="col-9">
              <div class="radiobox" {if $data['template']=='index1'}style="border-color:#ff6464;"{/if}>
                  <input type="radio" value="index1" name="data[template]" id="template2" class="myradio" data-verify="required" {if $data['template']=='index1'}checked{/if} data-title="活动模板">
                  <label for="template2">
                    白色模板
                  </label>
              </div>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 扫码次数</div>
            <div class="col-9">
                <input type="number" name="data[number]" value="{$data['number']}" class="form-input-bg" data-verify="required" data-title="扫码次数">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填 0 为不限制</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 已扫次数</div>
            <div class="col-9">
                <input type="number" name="data[view]" value="{$data['view']}" class="form-input-bg" data-verify="required" data-title="已扫次数">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">修改“扫码次数”时，此处可手动改为0，则前端会重新计算剩余次数。若无此需求则无需更改。</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">抖音主页</div>
            <div class="col-9">
                <input type="text" name="data[real_share]" value="{$data['real_share']}" class="form-input-bg" data-verify="" data-title="抖音主页">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填入商户抖音门店的分享链接，可留空，例如：https://v.douyin.com/JpgNwPt/</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">商户名称</div>
            <div class="col-9">
                <input type="text" name="data[poi_name]" value="{$data['poi_name']}" class="form-input-bg" data-verify="" data-title="商户名称">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填入抖音商户名称，视频的商户名称跟该选项有关</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">联系地址</div>
            <div class="col-9">
                <input type="text" name="data[poi_address]" value="{$data['poi_address']}" class="form-input-bg" data-verify="" data-title="联系地址">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填入商户地址，用于页面显示，与视频内容无关</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">抖音位置</div>
            <div class="col-9">
                <input type="text" name="data[poi_share]" value="{$data['poi_share']}" class="form-input-bg" data-verify="" data-title="抖音位置">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填入抖音商户地理位置页的分享链接，视频的地址跟该选项有关，可留空，例如：https://v.douyin.com/Jg6wryE/</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">小程序id</div>
            <div class="col-9">
                <input type="text" name="data[micro_app_id]" value="{$data['micro_app_id']}" class="form-input-bg" data-verify="" data-title="小程序id">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">示例：ttef9b112671b152ba</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">小程序url</div>
            <div class="col-9">
                <input type="text" name="data[micro_app_url]" value="{$data['micro_app_url']}" class="form-input-bg" data-verify="" data-title="小程序url">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">吊起小程序时的url参数。示例：pages/index?param=123</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">小程序标题</div>
            <div class="col-9">
                <input type="text" name="data[micro_app_title]" value="{$data['micro_app_title']}" class="form-input-bg" data-verify="" data-title="小程序标题">
            </div>
            <div class="form-box-bottom"></div>
        </div>

        <center style="font-size: 0.4rem;">
            活动介绍
            <div class="form-box-bottom"></div>
        </center>
        <div id="editorcontent" style="font-size:0.25rem;">{$data['content']}</div>

        <h2 class="fc-light py-3">|&nbsp;&nbsp;页面配置</small></h2>

        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 替换文本</div>
            <div class="col-9">
                <input type="text" name="data[replace][congratulations]" value="{$data['replace']['congratulations']}" class="form-input-bg" data-verify="required" data-title="替换页面“~恭喜~”文本">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">替换页面“~恭喜~”文本</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 替换文本</div>
            <div class="col-9">
                <input type="text" name="data[replace][participate]" value="{$data['replace']['participate']}" class="form-input-bg" data-verify="required" data-title="替换页面“你已经成功参与传播达人”文本">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">替换页面“你已经成功参与传播达人”文本</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 替换文本</div>
            <div class="col-9">
                <input type="text" name="data[replace][works]" value="{$data['replace']['works']}" class="form-input-bg" data-verify="required" data-title="替换页面“你参与传播的作品是”文本">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">替换页面“你参与传播的作品是”文本</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 替换文本</div>
            <div class="col-9">
                <input type="text" name="data[replace][introduction]" value="{$data['replace']['introduction']}" class="form-input-bg" data-verify="required" data-title="替换页面“活动介绍”文本">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">替换页面“活动介绍”文本</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 替换文本</div>
            <div class="col-9">
                <input type="text" name="data[replace][get_button]" value="{$data['replace']['get_button']}" class="form-input-bg" data-verify="required" data-title="替换页面“立即领取卡券”文本">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">替换页面“立即领取卡券”文本</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 替换文本</div>
            <div class="col-9">
                <input type="text" name="data[replace][view_button]" value="{$data['replace']['view_button']}" class="form-input-bg" data-verify="required" data-title="替换页面“查看我的卡券”文本">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">替换页面“查看我的卡券”文本</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 替换文本</div>
            <div class="col-9">
                <input type="text" name="data[replace][cart_error]" value="{$data['replace']['cart_error']?$data['replace']['cart_error']:'领取失败'}" class="form-input-bg" data-verify="required" data-title="替换页面“领取失败”文本">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">替换页面“领取失败”文本</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>

        <h2 class="fc-light py-3">|&nbsp;&nbsp;短视频</small></h2>

        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 延迟发布</div>
            <div class="col-9">
                <input type="text" name="data[video][delay]" value="{:$data['video']['delay']?$data['video']['delay']:'0'}" class="form-input-bg" data-verify="required" data-title="延迟发布时间">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">单位：秒</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box videopic">
            <div class="col-3">视频封面</div>
            <div class="col-9" style="line-height:0;">
                <div class="row" id="imgbox2">
                    <div class="col-6">
                        <button type="button" class="btn-img" id="chooseImage">
                            <img src="{$data['video']['pic']}" id="videoimg">
                            <div class="btn-content">+</div>
                        </button>
                    </div>
                </div>
                <input type="hidden" name="data[video][pic]" value="{$data['video']['pic']}" id="videopic">
                <input type="file" name="videopicupload" id="videopicupload" data-idx="" value="" style="display:none;">
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <input type="file" name="videoupload" id="videoupload" data-idx="" value="" style="display:none;">
        {foreach $data['video']['list'] as $idx=>$video}
        <div class="p-2 bg-light br-10 border mb-2 videobox">
          <div class="row form-box">
              <div class="col-3">视频标题</div>
              <div class="col-9">
                  <input type="text" name="data[video][list][][title]" value="{$video['title']}" class="form-input-bg" data-verify="" data-title="视频标题">
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3">视频地址</div>
              <div class="col-9">
                  <input type="text" name="data[video][list][][path]" value="{$video['path']}" class="form-input-bg videopath" data-verify="" data-title="视频地址" disabled>
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-4">
                <button type="button" class="btn btn-block btn-golden uploadvideo" data-idx="{$idx}">上传视频</button>
              </div>
              <div class="col-4">
                <a href="{$video['path']}" target="_blank" class="btn btn-block videoview">查看视频</a>
              </div>
              <div class="col-4">
                <button type="button" class="btn btn-block btn-red delvideo" data-idx="{$idx}">删除视频</button>
              </div>
              <div class="form-box-bottom"></div>
          </div>
        </div>
        {/foreach}
        <div class="row form-box">
            <div class="col-1"></div>
            <div class="col-10"><button type="button" class="btn btn-block addvideo">添加视频</button></div>
            <div class="col-1"></div>
            <div class="form-box-bottom"></div>
        </div>

        <h2 class="fc-light py-3">|&nbsp;&nbsp;海报设置</small></h2>

        <div class="row form-box">
            <div class="col-3"><span class="fc-red">*</span> 海报图片</div>
            <div class="col-9" style="line-height:0;">
                <div class="row" id="imgbox3">
                    <div class="col-6">
                        <button type="button" class="btn-img" id="choosePosterImage">
                            <img src="">
                            <div class="btn-content">+</div>
                        </button>
                        <input type="file" name="posterimgupload" id="posterimgupload" value="" style="display:none;">
                    </div>
                </div>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3"></div>
            <div class="col-9" style="font-size:0.18rem;">建议尺寸750x1334 px，JPG、PNG格式，图片大小2MB</div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-3">二维码</div>
            <div class="col-9">
                <label class="switch">
                    <input type="checkbox" value="1" name="qr">
                    <div class="slider round"></div>
                </label>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-12">拖动位置：</div>
            <div class="form-box-bottom">
                <div id="poster"></div>
                <div style="display:none;">
                    <button class="btn-com" id="btn-qr" type="button" data-type="qr">二维码</button>
                </div>
            </div>
        </div>

        <h2 class="fc-light py-3">|&nbsp;&nbsp;卡券设置</small></h2>
        <div class="row form-box cardboxh2">
            <div class="col-3">核销密码</div>
            <div class="col-9">
                <input type="text" name="data[card][pwd]" value="{$data['card']['pwd']}" class="form-input-bg" data-verify="" data-title="核销密码">
                <p style="color:#777;font-size:0.22rem;line-height:1.2em;">若不需要核销密码，留空即可</p>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        {foreach $data['card']['list'] as $idx=>$card}
        <div class="p-2 bg-light br-10 border mb-2 cardbox">
          <div class="row form-box">
              <div class="col-3">卡券名称</div>
              <div class="col-9">
                  <input type="text" name="data[card][list][][name]" value="{$card['name']}" class="form-input-bg" data-verify="" data-title="卡券名称">
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3">有效天数</div>
              <div class="col-9">
                  <input type="number" name="data[card][list][][term]" value="{$card['term']}" class="form-input-bg" data-verify="" data-title="有效天数">
                  <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填 0 为不限制</p>
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3">开始时间</div>
              <div class="col-9">
                  <input type="text" value="{$card['starttime']}" name="data[card][list][][starttime]" class="form-input-bg room" data-verify="" data-title="开始时间">
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3">结束时间</div>
              <div class="col-9">
                  <input type="text" value="{$card['endtime']}" name="data[card][list][][endtime]" class="form-input-bg room" data-verify="" data-title="结束时间">
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3">卡券数量</div>
              <div class="col-9">
                  <input type="number" name="data[card][list][][num]" value="{$card['num']}" class="form-input-bg" data-verify="" data-title="卡券数量">
                  <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填 0 为不限制</p>
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3">单人限领</div>
              <div class="col-9">
                  <input type="number" name="data[card][list][][limit]" value="{$card['limit']}" class="form-input-bg" data-verify="" data-title="单人限领">
                  <p style="color:#777;font-size:0.22rem;line-height:1.2em;">填 0 为不限制</p>
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3">使用规则</div>
              <div class="col-9">
                  <input type="text" name="data[card][list][][desc]" value="{$card['desc']}" class="form-input-bg" data-verify="" data-title="使用规则">
              </div>
              <div class="form-box-bottom"></div>
          </div>
          <div class="row form-box">
              <div class="col-3"></div>
              <div class="col-6"><button type="button" class="btn btn-block btn-red delcard" data-idx="{$idx}">删除</button></div>
              <div class="col-3"></div>
              <div class="form-box-bottom"></div>
          </div>
        </div>
        {/foreach}
        <div class="row form-box">
            <div class="col-1"></div>
            <div class="col-10"><button type="button" class="btn btn-block addcard">添加卡券</button></div>
            <div class="col-1"></div>
            <div class="form-box-bottom"></div>
        </div>

        <h2 class="fc-light py-3">|&nbsp;&nbsp;接口权限</small></h2>

        <div class="row form-box">
            <div class="col-6">获取用户信息</div>
            <div class="col-6">
                <label class="switch fr" id="scope_user_info">
                    <input type="checkbox" value="user_info" name="scope" class="scope">
                    <div class="slider round"></div>
                </label>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-6">获取手机号</div>
            <div class="col-6">
                <label class="switch fr" id="scope_mobile_alert">
                    <input type="checkbox" value="mobile_alert" name="scope" class="scope">
                    <div class="slider round"></div>
                </label>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-6">上传视频</div>
            <div class="col-6">
                <label class="switch fr" id="scope_video_create">
                    <input type="checkbox" value="video.create" name="scope" class="scope">
                    <div class="slider round"></div>
                </label>
            </div>
            <div class="form-box-bottom"></div>
        </div>
        <div class="row form-box">
            <div class="col-6">视频管理</div>
            <div class="col-6">
                <label class="switch fr" id="scope_data_external_item">
                    <input type="checkbox" value="data.external.item" name="scope" class="scope">
                    <div class="slider round"></div>
                </label>
            </div>
            <div class="form-box-bottom"></div>
        </div>

        <div class="row form-box">
            <div class="col-6">
                <button type="button" class="cancel" onclick="window.history.go(-1)">取消</button>
            </div>
            <div class="col-6">
                <button type="button" class="submit" id="createsale">提交</button>
            </div>
            <div class="form-box-bottom"></div>
        </div></form>
    </div>
    <style>
        #imgbox .col-6 {padding-bottom: 0.2rem;}
        #imgbox .imgbox {width: 100%; height: 1.2rem; padding-bottom: 100%; display: inline-block; position: relative;}
        #imgbox img,.btn-img img {width: 100%; height: 100%; overflow: hidden; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: 0.1rem;}
        .form-box {line-height:0.6rem; font-size:0.26rem;}
        .form-input-bg {border: 1px solid #a0a0a0; float:left;}
        .form-box-bottom {clear:both; padding: 0.15rem;}
        .col-9 {position: relative;}
        .form-left {position:absolute; top:0; left:0.15rem; background-color:#d2d2d2; width:0.8rem; height:0.6rem; border: 1px solid #a0a0a0; border-radius:0.1rem 0 0 0.1rem; text-align:center;}
        .form-right {position:absolute; top:0; right:0.15rem; background-color:#d2d2d2; width:0.8rem; height:0.6rem; border: 1px solid #a0a0a0; border-radius:0 0.1rem 0.1rem 0; text-align:center;}
        .cancel, .submit{
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            line-height: 1.4rem;
            border: 0;
            color: #333;
            text-align: center;
            font-size: 0.34rem;
            border-radius: 0.7rem;
            outline:none;
        }
        .cancel{
            background-color: #ff6464;
            float: right;
            margin-right: 0.3rem;
        }
        .submit{
            background-color: #ffd700;
            float: left;
            margin-left: 0.3rem;
        }
        .radiobox {
            display: inline-block;
            min-height: 0.5rem;
            padding: 1px 0.15rem;
            background-color: #f8f8f8;
            border: 0.02rem solid #d2d2d2;
            border-radius: 0.1rem;
            font-size: 0.22rem;
        }
        .myradio{
            width: 0.29rem;
            height:0.29rem;
            appearance: none;
            position: relative;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            margin: 0;
            vertical-align: text-bottom;
        }
        .myradio:before{
            content: '';
            width: 0.29rem;
            height: 0.29rem;
            border: 0.08rem solid #777777;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
            box-sizing: border-box;
            float: left;
        }
        .myradio:checked:before{
            content: '';
            width: 0.29rem;
            height: 0.29rem;
            border: 0.08rem solid #ff6464;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
            box-sizing: border-box;
        }
        .myradio:checked+label{
            color: #ff6464;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 1.35rem;
            height: 0.6rem;
        }
        .switch input {display:none;}
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 0.45rem;
            width: 0.45rem;
            left: 0.08rem;
            bottom: 0.07rem;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        input:checked + .slider {
            background-color: #ff6464;
        }
            input:focus + .slider {
            box-shadow: 0 0 1px #ff6464;
        }
        input:checked + .slider:before {
            -webkit-transform: translateX(0.75rem);
            -ms-transform: translateX(0.75rem);
            transform: translateX(0.75rem);
        }
        /* Rounded sliders */
        .slider.round {
            border-radius: 0.6rem;
        }
        .slider.round:before {
            border-radius: 50%;
        }

        #poster {width:320px;height:504px;background-color:#F0F0F0;position:relative;margin:0 auto;}
        #poster .bg { position:absolute;width:100%;z-index:0}
        #poster .drag { position: absolute; width:80px;height:80px; border:1px solid #DDD; }
        #poster .drag[type=img] img,#poster .drag[type=img] { width:100%;height:auto; }
        #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;color:#333;}
        #poster .drag img {position:absolute;z-index:0;width:100%; }
        #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
            position:absolute;
            width:7px;
            height:7px;
            z-index:1;
            font-size:0;
            border-radius:4px;
        }
        #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{background:#FC0;}
        .rLeftDown,.rRightUp{cursor:ne-resize;}
        .rRightDown,.rLeftUp{cursor:nw-resize;}
        .rRight,.rLeft{cursor:e-resize;}
        .rUp,.rDown{cursor:n-resize;}
        .rLeftDown{left:-4px;bottom:-4px;}
        .rRightUp{right:-4px;top:-4px;}
        .rRightDown{right:-4px;bottom:-4px;}
        .rRightDown{background-color:#00F;}
        .rLeftUp{left:-4px;top:-4px;}
        .rRight{right:-4px;top:50%;margin-top:-4px;}
        .rLeft{left:-4px;top:50%;margin-top:-4px;}
        .rUp{top:-4px;left:50%;margin-left:-4px;}
        .rDown{bottom:-4px;left:50%;margin-left:-4px;}
        .context-menu-layer { z-index:9999;}
        .context-menu-list { z-index:9999;}
    </style>
    <script type="text/javascript">
        var E = window.wangEditor;
        var editor1 = new E('#editorcontent');
        // 自定义菜单配置
        editor1.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'image',  // 插入图片
        'undo',  // 撤销
        'redo'  // 重复
        ];
        editor1.customConfig.uploadFileName = 'file'
        editor1.customConfig.uploadImgServer = "{$_W['baseurl']}/commons/upfile/upload";
        // 将图片大小限制为 1M
        editor1.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;
        editor1.create();
        //editor1.txt.html(document.getElementById('editorcontent').innerHTML)
        
        $(function(){
            var is_submit = true;

            $('.custominfotype').on('change', function(){
                if($(this).val()!='url'){
                    $('#jump_url_box').hide();
                }else{
                    $('#jump_url_box').show();
                }
            });

            $('input[name=qr]').on('change', function(){
                $('#btn-qr').click();
            });

            $('#choosePosterImage').on('click', function(){
              if(is_submit){
                $('#posterimgupload').click();
              }
            });
            $('#posterimgupload').on('change', function(){
              if(is_submit){
                is_submit = false;
                $('.loader').show();
                var formData = new FormData();
                formData.append('file',$(this)[0].files[0]);
                $.ajax({
                    url:"{$_W['baseurl']}/commons/upfile/index",
                    type:'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success:function(res){
                      if(res.code == 0){
                        $('#choosePosterImage').find('img').attr('src','/'+res.data.key);
                        if($('.drag[type=img]').length>0){
                            var obj = $('.drag[type=img]');
                            obj.find('img').attr('src', '/'+res.data.key).data('src', '/'+res.data.key);
                        }else{
                            var img = '<img src="'+'/'+res.data.key+'" data-src="'+'/'+res.data.key+'" />';
                            var index = 0;
                            var obj = $('<div class="drag" type="img" index="' + index +'" style="z-index:' + index+'">' + img+'</div>');
                            $('#poster').append(obj);
                        }
                        var si = setInterval(function(){
                            if(obj.find('img').height()>0){
                                $('#poster').height(obj.find('img').height());
                                clearInterval(si);
                            }
                        },200);
                      }else{
                        dialog(res.msg);
                      }
                      $('.loader').hide();
                      is_submit = true;
                    },
                    error: function(data) {
                      dialog('上传失败！');
                      $('.loader').hide();
                      is_submit = true;
                    }
                });
              }
            });
            
            $('#chooseImage').on('click', function(){
              if(is_submit){
                $('#videopicupload').click();
              }
            });
            $('#videopicupload').on('change', function(){
              if(is_submit){
                is_submit = false;
                $('.loader').show();
                var formData = new FormData();
                formData.append('file',$(this)[0].files[0]);
                $.ajax({
                    url:"{$_W['baseurl']}/commons/upfile/index",
                    type:'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success:function(res){
                      if(res.code == 0){
                        $('#videopic').val('/'+res.data.key);
                        $('#videoimg').attr('src','/'+res.data.key);
                      }else{
                        dialog(res.msg);
                      }
                      $('.loader').hide();
                      is_submit = true;
                    },
                    error: function(data) {
                      dialog('上传失败！');
                      $('.loader').hide();
                      is_submit = true;
                    }
                });
              }
            });
            var videoidx = $('.videobox').length;
            videoidx = videoidx?videoidx-1:0;
            $('.wap').on('click', '.uploadvideo', function(){
              if(is_submit){
                $('#videoupload').data('idx', $(this).data('idx')).click();
              }
            });
            $('#videoupload').on('change', function(){
              if(is_submit){
                is_submit = false;
                $('.loader').show();
                var idx = $(this).data('idx');
                var formData = new FormData();
                formData.append('file',$(this)[0].files[0]);
                $.ajax({
                    url:"{$_W['baseurl']}/commons/upfile/mp4",
                    type:'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success:function(res){
                      if(res.code == 0){
                        $('.videobox:eq('+idx+')').find('.videopath').val('/'+res.data.key);
                        $('.videobox:eq('+idx+')').find('.videoview').attr('href','/'+res.data.key);
                      }else{
                        dialog(res.msg);
                      }
                      $('.loader').hide();
                      is_submit = true;
                    },
                    error: function(data) {
                      dialog('上传失败！');
                      $('.loader').hide();
                      is_submit = true;
                    }
                });
              }
            });
            $('.wap').on('click', '.delvideo', function(){
              $('.videobox:eq('+$(this).data('idx')+')').remove();
              var i=0;
              $('.delvideo').each(function(){
                $(this).attr('data-idx', i);
                i++;
              });
              i=0;
              $('.uploadvideo').each(function(){
                $(this).attr('data-idx', i);
                i++;
              });
              videoidx = $('.videobox').length;
              videoidx = videoidx?videoidx-1:0;
            });
            $('.addvideo').on('click', function(){
              var obj = '';
              if($('.videobox').length>0){
                videoidx++;
                obj = $('.videobox:last');
              }else{
                obj = $('.videopic');
              }
              var htmldata = '<div class="p-2 bg-light br-10 border mb-2 videobox">'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">视频标题</div>'+
                                    '<div class="col-9">'+
                                        '<input type="text" name="data[video][list][][title]" value="" class="form-input-bg" data-verify="" data-title="视频标题">'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">视频地址</div>'+
                                    '<div class="col-9">'+
                                        '<input type="text" name="data[video][list][][path]" value="" class="form-input-bg videopath" data-verify="" data-title="视频地址" disabled>'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-4">'+
                                      '<button type="button" class="btn btn-block btn-golden uploadvideo" data-idx="'+videoidx+'">上传视频</button>'+
                                    '</div>'+
                                    '<div class="col-4">'+
                                      '<a href="#" target="_blank" class="btn btn-block videoview">查看视频</a>'+
                                    '</div>'+
                                    '<div class="col-4">'+
                                      '<button type="button" class="btn btn-block btn-red delvideo" data-idx="'+videoidx+'">删除视频</button>'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                              '</div>';
              obj.after(htmldata);
            });

            var cardidx = $('.cardbox').length;
            cardidx = cardidx?cardidx-1:0;
            $('.wap').on('click', '.delcard', function(){
              $('.cardbox:eq('+$(this).data('idx')+')').remove();
              var i=0;
              $('.delcard').each(function(){
                $(this).attr('data-idx', i);
                i++;
              });
              cardidx = $('.cardbox').length;
              cardidx = cardidx?cardidx-1:0;
            });
            $('.addcard').on('click', function(){
              var obj = '';
              if($('.cardbox').length>0){
                cardidx++;
                obj = $('.cardbox:last');
              }else{
                obj = $('.cardboxh2');
              }
              var htmldata = '<div class="p-2 bg-light br-10 border mb-2 cardbox">'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">卡券名称</div>'+
                                    '<div class="col-9">'+
                                        '<input type="text" name="data[card][list][][name]" value="" class="form-input-bg" data-verify="" data-title="卡券名称">'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">有效天数</div>'+
                                    '<div class="col-9">'+
                                        '<input type="number" name="data[card][list][][term]" value="0" class="form-input-bg" data-verify="" data-title="有效天数">'+
                                        '<p style="color:#777;font-size:0.22rem;line-height:1.2em;">填 0 为不限制</p>'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">开始时间</div>'+
                                    '<div class="col-9">'+
                                        '<input type="text" value="" name="data[card][list][][starttime]" class="form-input-bg room" data-verify="" data-title="开始时间">'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">结束时间</div>'+
                                    '<div class="col-9">'+
                                        '<input type="text" value="" name="data[card][list][][endtime]" class="form-input-bg room" data-verify="" data-title="结束时间">'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">卡券数量</div>'+
                                    '<div class="col-9">'+
                                        '<input type="number" name="data[card][list][][num]" value="0" class="form-input-bg" data-verify="" data-title="卡券数量">'+
                                        '<p style="color:#777;font-size:0.22rem;line-height:1.2em;">填 0 为不限制</p>'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">单人限领</div>'+
                                    '<div class="col-9">'+
                                        '<input type="number" name="data[card][list][][limit]" value="0" class="form-input-bg" data-verify="" data-title="单人限领">'+
                                        '<p style="color:#777;font-size:0.22rem;line-height:1.2em;">填 0 为不限制</p>'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3">使用规则</div>'+
                                    '<div class="col-9">'+
                                        '<input type="text" name="data[card][list][][desc]" value="" class="form-input-bg" data-verify="" data-title="使用规则">'+
                                    '</div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                                '<div class="row form-box">'+
                                    '<div class="col-3"></div>'+
                                    '<div class="col-6"><button type="button" class="btn btn-block btn-red delcard" data-idx="'+cardidx+'">删除</button></div>'+
                                    '<div class="col-3"></div>'+
                                    '<div class="form-box-bottom"></div>'+
                                '</div>'+
                              '</div>';
                obj.after(htmldata);
                $('.room').each(function(){
                    if($(this).data('date') != '1'){
                        new Rolldate({
                            el: this,
                            format: 'YYYY-MM-DD',
                            beginYear: 2000,
                            endYear: 2100,
                            value: $(this).val()
                        });
                        $(this).data('date', '1');
                    }
                });
            });

            {if in_array('user_info', $data['scope'])}$('#scope_user_info').click();{/if}
            {if in_array('mobile_alert', $data['scope'])}$('#scope_mobile_alert').click();{/if}
            {if in_array('video.create', $data['scope'])}$('#scope_video_create').click();{/if}
            {if in_array('data.external.item', $data['scope'])}$('#scope_data_external_item').click();{/if}

            $('.room').each(function(){
                new Rolldate({
                    el: this,
                    format: 'YYYY-MM-DD',
                    beginYear: 2000,
                    endYear: 2100,
                    value: $(this).val()
                });
                $(this).data('date', '1');
            });

            $('.myradio').on('change', function(){
                $('.radiobox').css('border-color', '#d2d2d2');
                $(this).parent().css('border-color', '#ff6464');
            });

            var issubmit = true;
            $('#createsale').on('click', function(){
                if(issubmit){
                    $('.videopath').attr('disabled', false);
                    var formData = {};
                    var t = $('#Form').serializeArray();
                    $('.videopath').attr('disabled', true);
                    // console.log(t);return false;
                    var errname = '';
                    var idx = {};
                    $.each(t, function() {
                        if($("input[name='"+this.name+"']").data('verify')=='required' && this.value==''){
                            errname = this.name;
                        }
                        if(this.name.indexOf('[]') == -1){
                          formData[this.name] = this.value;
                        }else{
                          if(idx[this.name]){
                            idx[this.name]++;
                          }else{
                            idx[this.name] = 1;
                          }
                          formData[this.name.replace('[]','['+(idx[this.name]-1)+']')] = this.value;
                        }
                    });
                    if(errname != ''){
                        alert("“"+$("input[name='"+errname+"']").data('title')+'”不能为空！');
                        return false;
                    }
                    
                    var poster = [];
                    $('.drag').each(function(){
                        var obj = $(this);
                        var type = obj.attr('type');
                        var left = obj.css('left'),top = obj.css('top');
                        var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
                        if(type=='nickname'){
                            d.size = obj.attr('size');
                            d.color = obj.attr('color');
                        } else if(type=='qr'){
                            d.size = obj.attr('size');
                        } else if(type=='img'){
                            d.src = obj.find('img').data('src');
                        }
                        poster.push(d);
                    });
                    formData['data[poster]'] = JSON.stringify(poster);
                    formData['data[content]'] = editor1.txt.html();
                    var scope = [];
                    $('.scope:checked').each(function(){
                        scope.push($(this).val())
                    });
                    formData['data[scope]'] = scope.join();
                    // console.log('sssssssssssssssssssssssssssssssss');
                    // console.log(formData);
                    // return false;

                    issubmit = false;
                    $('.loader').show();
                    $.post("{$_W['baseurl']}/index/merch/editsale?id={$_GPC['id']}",formData,function(ret){
                        issubmit = true;
                        $('.loader').hide();
                        dialog(ret.msg);
                        setTimeout(function(){
                            if(ret.code==0){
                                window.history.go(-1);
                            }
                        }, 2000);
                    });
                }
            });
            $.get("/static/Public/Home/js/designer.js", function(data){
                eval(data);
                var pdata = {:html_entity_decode($data['poster'])};
                 console.log(poster)
                for (let i = 0; i < pdata.length; i++) {
                    if(pdata[i].type == 'img'){
                        $('#choosePosterImage').find('img').attr('src', pdata[i].src);
                        var img = '<img data-src="'+pdata[i].src+'" src="'+pdata[i].src+'" />';
                        var index = 0;
                        var obj = $('<div class="drag" type="img" index="' + index +'" style="z-index:' + index+'">' + img+'</div>');
                        $('#poster').append(obj);
                        var si = setInterval(function(){
                            if(obj.find('img').height()>0){
                                $('#poster').height(obj.find('img').height());
                                clearInterval(si);
                            }
                        },200);
                    }else{
                        $('input[name='+pdata[i].type+']').click();
                        $('.drag[type='+pdata[i].type+']').css(pdata[i]);
                    }
                }
            },"text");
        });
    </script>
</div>
{include file='public/footer'}